<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="js/jquery1.42.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
</head>
<body>

<style type="text/css">
    /* css 重置 */
    *{margin:0; padding:0; list-style:none; }
    body{ background:#fff; font:normal 12px/22px 宋体;  }
    img{ border:0;  }
    a{ text-decoration:none; color:#333;  }

    /* 本例子css */
    .picScroll-left{
        overflow:hidden; position:relative;  border:1px solid #ccc;
    }
    .picScroll-left .hd{
        overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;
    }
    .picScroll-left .hd .prev,.picScroll-left .hd .next{
        display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
        cursor:pointer; background: url(img/center_right_icon.png) 0 0 no-repeat;
    }
    .picScroll-left .hd .next{
        background-position: -46px -85px;
    }
    .picScroll-left .hd .prev{
        background-position: -15px -85px;
    }
    .picScroll-left .hd .prevStop{
        background-position:-60px 0;
    }
    .picScroll-left .hd .nextStop{
        background-position:-60px -50px;
    }
    .picScroll-left .hd ul{
        float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1;
    }
    .picScroll-left .hd ul li{
        float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat;
    }
    .picScroll-left .hd ul li.on{
        background-position:0 0;
    }
    .picScroll-left .bd{
        padding:10px;
    }
    .picScroll-left .bd ul{
        overflow:hidden; zoom:1;
    }
    .picScroll-left .bd ul li{
        margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;
    }
    .picScroll-left .bd ul li .pic{
        text-align:center;
    }
    .picScroll-left .bd ul li .pic img{
        width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc;
    }
    .picScroll-left .bd ul li .pic a:hover img{
        border-color:#999;
    }
    .picScroll-left .bd ul li .title{
        line-height:24px;
    }

</style>

<div class="picScroll-left">
    <div class="hd">
        <a class="next"></a>
        <ul><li class="">1</li><li class="">2</li><li class="on">3</li><li class="">4</li><li class="">5</li><li class="">6</li></ul>
        <a class="prev"></a>
        <span class="pageState"><span>3</span>/6</span>
    </div>
    <div class="bd">
        <div class="tempWrap" style="overflow:hidden; position:relative; width:720px"><ul class="picList" style="width: 1420px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -418.357px;"><li class="clone" style="float: left; width: 126px;">
            <div class="pic">
                <a href=" " >
                    <div class="right_top_team">
                        <img src="img/lunbo/team/team北京国安.jpg" alt="">
                        <p class="r_t2_p1">北京国安吧</p>
                        <p class="r_t2_p2 icon_huya"> 3261945</p>
                        <p class="r_t2_p3 icon_football">足球</p>
                    </div>
                </a>
            </div>
        </li>
            <li style="float: left; width: 126px;">
                <div class="pic">
                    <a href=" "  >
                        <div class="right_top_team">
                            <img src="img/lunbo/team/team切尔西.jpg" alt="">
                            <p class="r_t2_p1">切尔西吧</p>
                            <p class="r_t2_p2 icon_huya"> 3261945</p>
                            <p class="r_t2_p3 icon_football">足球</p>
                        </div>
                    </a>
                </div>
            </li>
            <li style="float: left; width: 126px;">
                <div class="pic">
                    <a href=" "  >
                        <div class="right_top_team">
                            <img src="img/lunbo/team/team皇家马德里.jpg" alt="">
                            <p class="r_t2_p1">皇家马德里吧</p>
                            <p class="r_t2_p2 icon_huya"> 3261945</p>
                            <p class="r_t2_p3 icon_football">足球</p>
                        </div>
                    </a>
                </div>
            </li>
            <li style="float: left; width: 126px;">
                <div class="pic">
                    <a href=" "  >
                        <div class="right_top_team">
                            <img src="img/lunbo/team/team尤文图斯.jpg" alt="">
                            <p class="r_t2_p1">尤文图斯吧</p>
                            <p class="r_t2_p2 icon_huya"> 3261945</p>
                            <p class="r_t2_p3 icon_football">足球</p>
                        </div>
                     </a>
                </div>
            </li>

            <li class="clone" style="float: left; width: 126px;">
                <div class="pic"><a href=" "  ><img src="img/lunbo/team/team拜仁慕尼黑.jpg"></a></div>
                <div class="title"><a href=" "  >team拜仁慕尼黑</a></div>
            </li><li class="clone" style="float: left; width: 126px;">
                <div class="pic"><a href=" "  ><img src="img/lunbo/team/team欧冠.jpeg"></a></div>
                <div class="title"><a href=" "  >team欧冠</a></div>
            </li><li class="clone" style="float: left; width: 126px;">
                <div class="pic"><a href=" "  ><img src="img/lunbo/team/team北京国安.jpg"></a></div>
                <div class="title"><a href=" "  >team北京国安</a></div>
            </li>
            </li><li class="clone" style="float: left; width: 126px;">
                <div class="pic"><a href=" "  ><img src="img/lunbo/team/team尤文图斯.jpg"></a></div>
                <div class="title"><a href=" "  >team尤文图斯</a></div>
            </li>
        </ul>
        </div>
    </div>
    <li class="clearfix" style="width: 180px;">
        <a rel="noopener" class="good_forum clearfix" href="/f?kw=%E6%AC%A7%E6%B4%B2%E5%86%A0%E5%86%9B%E6%9D%AF" target="_blank">
            <img src="https://tb1.bdstatic.com/tb/%E6%AC%A7%E5%86%A0.jpeg" width="65" height="65" class="gf_pic">
            <div class="gf_desc">
                <p class="gf_fname">欧洲冠军杯吧</p>
                <p class="gf_m_num">2222719</p>
                <p class="gf_tag"></p>
            </div>
        </a>
    </li>
</div>

<script id="jsID" type="text/javascript">
    jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4,delayTime:1000});
</script>

</body>
</html>